<template>
	<view class="container">
		<u-navbar :title="data.title" @leftClick="toBack" placeholder></u-navbar>
		<u-form :model="data.formData" :error-type="['toast','message']" ref="form1">
			<u-form-item required label="证书名称" prop="name" label-position="top">
				<view class="u-flex u-flex-1 u-row-between">
					<u-field :placeholder-style="data.placeholderStyle" :border-bottom="false" label-width="0"
						v-model="data.formData.name" placeholder="请填写证书名称"  />
				</view>
			</u-form-item>
			<u-form-item required label="获得时间" prop="obtaintime" label-position="top">
				<view class="u-flex u-flex-1 u-row-between">
					<u-input :placeholder-style="data.placeholderStyle" v-model="data.formData.obtaintime"
						placeholder="请选择" disabled @click="data.isstarttime=true" />
					<u-icon name="arrow-right" color="#bbbbbb" size="40" @click="data.isstarttime=true"></u-icon>
				</view>
			</u-form-item>
		</u-form>
		<!-- <u-bottom-button confirmText="保存" @confirm="submit"></u-bottom-button>
		<view class="delete" v-if="data.type=='edit'" @click="data.dele =true"><text>删除此证书</text></view> -->
		<view class="" style="height: 140rpx;width:calc(100% - 60rpx); background-color: #fff;position: fixed;bottom: 20rpx;">
			<u-button  hoverClass="none" :customStyle="data.customStyle" @click="$u.throttle(submit,2000)">保存</u-button>
			<view class="delete" v-if="data.type=='edit'" @click="data.dele =true"><text>删除此证书</text></view>
		</view>
		<!-- 入职时间 -->
		<u-picker v-model="data.isstarttime" :params="data.params" @confirm="starttimeConfirm"
			:default-time="data.formData.obtaintime?$u.timeFormat(new Date(data.formData.obtaintime), 'yyyy-mm-dd'):$u.timeFormat(new Date(), 'yyyy-mm-dd')"
			mode="time"></u-picker>
		<u-modal @confirm="educationDelete" title="系统提示" :mask-close-able="true" :title-style="data.titleStyle"
			:show-cancel-button="true" v-model="data.dele">
			<view class="slot-content"
				style="height: 200rpx; display: flex;align-items: center;justify-content: center;">
				<text>确定删除此证书吗？</text>
			</view>
		</u-modal>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	import {
		onReady,
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	const form1 = ref();
	const data = reactive({
		customStyle:{
			color:'#fff',
			background:'#00d075',
			bordern:'none'
		},
		params: {
			year: true,
			month: true,
			day: false,
			hour: false,
			minute: false,
			second: false
		},
		titleStyle: {
			'font-size': '32rpx',
			'color': '#000',
			'font-weight': 'bold'
		},
		isNav: true,
		type: "",
		rules: {
			name: [{
				required: true,
				message: '请填写证书名称',
				// 可以单个或者同时写两个触发验证方式 
				trigger: 'blur',
			}],
			obtaintime: [{
				required: true,
				message: '请选择获得时间',
				// 可以单个或者同时写两个触发验证方式 
				trigger: 'change',
			}]


		},
		formData: {
			name: '',
			obtaintime: '',

		},
		labelStyle: {
			'font-size': '36rpx',
			'color': '#000'
		},
		isstarttime: false,
		isendtime: false,
		thisyear: false,
		dele: false,
		title: "添加证书",
		placeholderStyle: "color: #c0c4cc;font-size: 28rpx;",


	})
	// 返回上一页
	const toBack = () => {
		if (!data.value.isNav) {
			uni.$u.route({
				type: 'redirect',
				url: 'pages/login/status'
			})
		} else {
			uni.$u.route({
				type: 'back'
			})
		}
	}


	const starttimeConfirm = (e) => {
		data.formData.obtaintime = e.year + '-' + e.month
	}

	// 保存
	const submit = () => {
		form1.value.validate(async valid => {
			if (valid) {
				let res = await uni.$u.api.certificateSave(data.formData)
				if (res) {
					uni.$u.toast(data.type == 'edit' ? '修改成功' : '添加成功')
					setTimeout(() => {
						uni.$u.route({
							type: 'back'
						})
					}, 1000)
				}
			}
		});
	}

	const educationDelete = async () => {
		let params = {
			id: data.formData.id
		}
		let res = await uni.$u.api.certificateDelete(
			params
		)
		if (res) {
			uni.$u.toast("删除成功")
			setTimeout(() => {
				uni.$u.route({
					type: 'back'
				})
			}, 1000)
		}
	}
	onReady(() => {
		form1.value.setRules(data.rules)
	})
	onLoad(({
		item,
		type
	}) => {
		data.type = type
		if (type == "edit") {
			data.title = "修改证书"
			let code = decodeURIComponent(item)
			data.formData = JSON.parse(code)
			data.formData.obtaintime = uni.$u.timeFormat(new Date(data.formData.obtaintime * 1000), 'yyyy-mm')
		}


	})
</script>

<style lang="scss">
	page,
	body {
		width: 100vw;
		height: 100%;
		background-color: #fff;
	}

	.container {
		padding: 30rpx;

		.delete {
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;

			text {
				color: #867F7F;
				font-size: 24rpx;
			}
		}
	}

	:deep .u-flex-1 {
		margin-left: 0 !important;
	}
	:deep .u-field__input-wrap {
		width: 500rpx !important;
	}
</style>